<template>
    <div>
        <h1>属性绑定指令</h1>
        <div>学校名:{{schoolName}}</div>
        <!-- 
            在vue中如果要给一个标签动态的设置属性，需要借助v-bind指令完成，这个指令的主要作用就是动态设置属性的
            标准语法形式      v-bind:属性名="data中的属性值"
            简写语法形式  :属性名="data中的属性值"
         -->
        <div>官网:<a v-bind:href="url">{{schoolName}}</a></div>
        <div>官网:<a :href="url">{{schoolName}}</a></div>
        <hr>
        <div>
            <!-- 网络上获取图片 -->
            <img :src="baiduNetworkUrl" alt="" width="150px">
            <!-- 
                获取assets中图片有三种方式
                1）使用BASE64图片方式,如果图片小于10k，就会变成BASE64图片形式
                2）通过import导入方式
                   2.1)首先导入图片：import maPic from './assets/ma.jpg'
                   2.2）在data中直接引入
                3）通过require方式直接导入
             -->
            <img :src="maPicUrl" alt="">
        </div>
    </div>
</template>

<script>
// import maPic from './assets/ma.jpg'
export default {
    data(){
        return{
            schoolName:'蜗牛学院',
            url:'http://www.woniuxy.com',
            baiduNetworkUrl:'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png',
            // maPicUrl:require('./assets/ma.jpg')
            maPicUrl:''

        }
    }
}
</script>

<style>

</style>